<template>
  <div
    v-if="show"
    class="eagle-radio-group"
  >
    <template v-if="label">
      <van-field
      :name="name"
      class="input_text"
      :label="label"
      :required="required"
      :label-width="labelWidth"
    >
      <template #input>
        <van-radio-group
          :value="value"
          @input="(val)=>handleChecked(val)"
          :direction="direction"
          @change="handleChange"
          :disabled="readonly"
        >
          <slot></slot>
          <template v-if="dataSource.length>0">
            <eagle-radio
              :name="item[option.value]"
              v-model="item[option.value]"
              :label="item[option.label]"
              v-for="(item, index) in dataSource"
              :key="index"
            >{{ item.label }}</eagle-radio>
          </template>
        </van-radio-group>
      </template>
      <slot/>
    </van-field>
    </template>
    <template v-if="!label">
      <van-radio-group
        :value="value"
        @input="val=>this.$emit('input',val)"
        :direction="direction"
        @change="handleChange"
        :disabled="readonly"
      >
        <slot></slot>
        <template v-if="dataSource.length>0">
          <eagle-radio
            :name="item[option.value]"
            v-model="item[option.value]"
            :label="item[option.label]"
            v-for="(item, index) in dataSource"
            :key="index"
          >{{ item.label }}</eagle-radio>
        </template>
      </van-radio-group>
    </template>
  </div>
</template>
<script>
export default {
  name: "eagle-radio-group",
  props: {
    name: {
      type: String,
      default() {
        return "";
      },
    },
    label: {
      type: String,
      default() {
        return "";
      },
    },
    direction: {
      type: String,
      default() {
        return "vertical";
      },
    },
    required: {
      type: [Boolean],
      default() {
        return false;
      },
    },
    option: {
      type: Object,
      default: function () {
        return { label: "Name", value: "ID" };
      },
    },
    dataSource: {
      type: Array,
      default() {
        return [];
      },
    },
    value: {
      type: String | Number,
      default() {
        return null;
      },
    },
    readonly: {
      type: Boolean,
      default() {
        return false;
      },
    },
    show: {
      type: Boolean,
      default: () => true,
    },
    labelWidth: {
      type: [Number,String],
      default: '100px'
    },
  },
  data() {
    return {
      radio: "",
    };
  },
  watch: {
    // value(newvalue, oldvalue) {
    //     
    //     if (newvalue !== oldvalue) {
    //         this.radio = this.value;
    //     }
    // },
  },
  methods: {
    handleChange(val) {
      this.$emit("input", val);
      this.$emit("change", val);
    },
    handleChecked(val) {
      if (val) {
        this.radio = val;
        this.$emit("input", this.radio);
      } else {
        this.$emit("input", "");
      }
    },
  },
};
</script>
<style lang="less" scoped>
// /deep/ .van-field__label {
//   border-bottom: 0.1px solid #ecebf085;
//   margin-right: 0px;
// }
// /deep/ .van-field__control {
//   border-bottom: 0.1px solid #ecebf085;
//   margin-right: 0px;
// }

.eagle-radio-group{
  position: relative;
}

.eagle-radio-group::after {
  position: absolute;
  box-sizing: border-box;
  content: " ";
  pointer-events: none;
  right: 0.42667rem;
  bottom: 0;
  left: 0.42667rem;
  border-bottom: 0.02667rem solid #ebedf0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
</style>